{% extends "base/nav.html" %}
{% load static %}

{% block title %}情感最佳景点 - 旅游舆情监测{% endblock %}

{% block css %}
<style>
.sentiment-best-card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.sentiment-best-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
}

.rank-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: linear-gradient(45deg, #FFD700, #FFA500);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    box-shadow: 0 3px 10px rgba(255, 215, 0, 0.3);
}

.score-display {
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    margin: 15px 0;
}

.score-excellent { color: #28a745; }
.score-good { color: #20c997; }
.score-average { color: #ffc107; }
.score-poor { color: #dc3545; }

.ranking-stats {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
}

.stat-item {
    text-align: center;
    padding: 15px;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.9rem;
    opacity: 0.9;
}
</style>
{% endblock %}

{% block content %}
<div class="container py-4">
    <!-- 页面标题 -->
    <div class="row mb-5">
        <div class="col-12 text-center">
            <h1 class="display-4 font-weight-bold text-primary mb-3">
                <i class="fas fa-trophy"></i> 情感最佳景点排行榜
            </h1>
            <p class="lead text-muted">基于多维度情感分析的智能推荐</p>
        </div>
    </div>

    <!-- 统计信息 -->
    <div class="ranking-stats">
        <div class="row">
            <div class="col-md-4">
                <div class="stat-item">
                    <div class="stat-number">{{ total_attractions }}</div>
                    <div class="stat-label">参与排名景点</div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="stat-item">
                    <div class="stat-number">{{ best_attractions|length }}</div>
                    <div class="stat-label">上榜景点</div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="stat-item">
                    <div class="stat-number">TOP 10%</div>
                    <div class="stat-label">情感最佳标准</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 景点排行榜 -->
    <div class="row">
        {% for item in best_attractions %}
        <div class="col-lg-6 mb-4">
            <div class="card sentiment-best-card">
                <div class="rank-badge">
                    {{ forloop.counter }}
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            <h5 class="card-title">
                                <a href="{% url 'main:attraction_detail' item.attraction.pk %}" class="text-decoration-none">
                                    {{ item.attraction.name }}
                                </a>
                            </h5>
                            <p class="text-muted mb-2">
                                <i class="fas fa-map-marker-alt"></i> {{ item.attraction.location }}
                            </p>
                            <div class="attraction-stats">
                                <small class="text-muted me-3">
                                    <i class="fas fa-comment"></i> {{ item.rank_data.review_count }} 评论
                                </small>
                                <small class="text-success me-3">
                                    <i class="fas fa-smile"></i> {{ item.rank_data.positive_ratio }}% 积极
                                </small>
                                <small class="text-info">
                                    <i class="fas fa-chart-line"></i> {{ item.rank_data.avg_sentiment }} 情感分
                                </small>
                            </div>
                        </div>
                        <div class="col-md-4 text-center">
                            <div class="score-display 
                                {% if item.comprehensive_score >= 90 %}score-excellent
                                {% elif item.comprehensive_score >= 80 %}score-good
                                {% elif item.comprehensive_score >= 70 %}score-average
                                {% else %}score-poor{% endif %}">
                                {{ item.comprehensive_score }}
                            </div>
                            <small class="text-muted">综合得分</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12 text-center py-5">
            <i class="fas fa-trophy fa-3x text-muted mb-3"></i>
            <h4 class="text-muted">暂无情感最佳景点数据</h4>
            <p class="text-muted">请等待更多评论数据收集</p>
        </div>
        {% endfor %}
    </div>

    <!-- 分页 -->
    {% if is_paginated %}
    <div class="row mt-5">
        <div class="col-12">
            <nav aria-label="Page navigation">
                <ul class="pagination justify-content-center">
                    {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}">
                            <i class="fas fa-chevron-left"></i> 上一页
                        </a>
                    </li>
                    {% endif %}

                    {% for num in page_obj.paginator.page_range %}
                        {% if page_obj.number == num %}
                        <li class="page-item active">
                            <span class="page-link">{{ num }}</span>
                        </li>
                        {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                        </li>
                        {% endif %}
                    {% endfor %}

                    {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.next_page_number }}">
                            下一页 <i class="fas fa-chevron-right"></i>
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}